<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>EX-admin 数据添加页面</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="favicon.ico">
	<link rel="stylesheet" href="../../assets/css/main.css">
</head>
<body>

<div class="layui-fluid x-body" id="app">

	<blockquote class="layui-elem-quote">
		本页面所有 demo 均采用的 layui 官方的上传插件 layui.upload，更多文档请去
		<a href="http://www.layui.com/doc/modules/upload.html" target="_blank" class="text-color-red text-bold">官网</a>
		查看。
	</blockquote>

	<div class="layui-row">

		<!-- 普通上传 -->
		<fieldset class="layui-elem-field">
			<legend>普通图片上传</legend>
			<div class="layui-field-box">
				<div class="layui-upload">
					<button type="button" class="layui-btn" id="test-upload-normal">选择图片</button>
					<div class="layui-upload-list">
						<img class="img-thumbnail" id="test-upload-normal-img" style="width: 120px; height: 120px;"
							 src="">
					</div>

					<div class="x-well" v-if="normalUpload.success == false">
						<span class="text-color-red">{{ normalUpload.message }}</span>
						<button class="layui-btn layui-btn-mini" id="normal-upload-reload">重新上传</button>
					</div>
				</div>
			</div>
		</fieldset>

		<!-- 多图上传 -->
		<fieldset class="layui-elem-field">
			<legend>多图片上传</legend>
			<div class="layui-field-box">
				<div class="layui-upload">
					<button type="button" class="layui-btn" id="test-upload-more">选择图片</button>
					<div class="layui-upload-list" id="test-upload-more-list">
						<ul class="x-layui-row">
							<li v-for="img in multiUpload.imgs">
								<img :src="img.src" :alt="img.name" class="img-thumbnail"
									 style="width: 120px; height: 120px;"/>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</fieldset>

		<!-- 拖拽上传 -->
		<fieldset class="layui-elem-field">
			<legend>拖拽上传</legend>
			<div class="layui-field-box">
				<div class="layui-upload-drag" id="test-upload-drag">
					<i class="layui-icon"></i>
					<p>点击上传，或将文件拖拽到此处</p>
				</div>
			</div>
		</fieldset>

		<fieldset class="layui-elem-field">
			<legend>高级应用：制作一个多文件列表</legend>
			<div class="layui-field-box">
				<div class="layui-upload">
					<button type="button" class="layui-btn layui-btn-normal" id="test-upload-testList">选择多文件</button>
					<div class="layui-upload-list">
						<table class="layui-table">
							<thead>
							<tr>
								<th>文件名</th>
								<th>大小</th>
								<th>状态</th>
								<th>操作</th>
							</tr>
							</thead>
							<tbody id="test-upload-demoList">
							<tr :id="'upload-'+file.index" v-for="(file, index) in files">
								<td>{{ file.name }}</td>
								<td>{{ file.size }} KB</td>
								<td v-if="file.status == 0">待上传</td>
								<td v-else-if="file.status == 1"><span style="color: #5FB878;">上传成功</span></td>
								<td v-else-if="file.status == -1"><span style="color: #FF5722;">上传失败</span></td>
								<td>
									<button class="layui-btn layui-btn-mini test-upload-demo-reload"
											v-if="file.success == false">重传
									</button>
									<button class="layui-btn layui-btn-mini layui-btn-danger test-upload-demo-delete">
										删除
									</button>
								</td>
							</tr>
							</tbody>
						</table>
					</div>
					<button type="button" class="layui-btn" id="test-upload-testListAction">开始上传</button>
				</div>
			</div>
		</fieldset>

	</div>
</div>
<script type="text/javascript" src="../../js/libs/jquery.min.js "></script>
<script type="text/javascript" src="../../js/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../js/libs/vue/vue.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/utils.js"></script>
<script>

	var APP = new Vue({
		el: '#app',
		data: {
			// datas for normal function upload
			normalUpload: {
				success: true,
				message: "上传失败."
			},

			// multiple image upload datas
			multiUpload: {
				imgs: []
			},

			// datas for advance function upload
			files: []
		},
		methods: {
			// 这里为了解决 vue 2.0 编译报错， 这个是 Vue 和传统 js 混用的一个 Bug
			// method "upload" is not defined on the instance but referenced during render
			// Vue 要求所有调用的方法都需要在 methods 定义，但是其实 upload 方法是 layui 的，通过原生方式调用并不会报错。
			upload: function () {

			}
		}

	});

	layui.use(['upload'], function () {
		var $ = layui.jquery
			, upload = layui.upload;

		//普通图片上传
		var uploadInst = upload.render({
			elem: '#test-upload-normal'
			, url: 'http://herosphp.r9it.com/admin/upload/qiniu'
			, before: function (obj) {
				//预读本地文件示例，不支持ie8
				// obj.preview(function(index, file, result){
				// 	$('#test-upload-normal-img').attr('src', result); //图片链接（base64）
				// });
			}
			, done: function (res) {
				//上传成功
				if (res.code == "000") {
					messageOk("文件上传成功.");
					$('#test-upload-normal-img').attr('src', res.item.url); //图片链接（base64）
				}
			}
			, error: function () {
				//演示失败状态，并实现重传
				APP.$data.normalUpload.success = false;
				APP.$data.normalUpload.message = "请求上传接口出现异常";

				$('#normal-upload-reload').on('click', function () {
					uploadInst.upload();
				});
			}
		});

		//多图片上传
		upload.render({
			elem: '#test-upload-more'
			, url: 'http://herosphp.r9it.com/admin/upload/qiniu'
			, multiple: true
			, before: function (obj) {
				//预读本地文件示例，不支持ie8
				// obj.preview(function(index, file, result){
				//
				// 	APP.$data.multiUpload.imgs.push({name: file.name, src:result});
				// });
			}
			, done: function (res) {
				console.log(res);
				//上传完毕
				if (res.code == "000") {
					messageOk("文件上传成功.");
					APP.$data.multiUpload.imgs.push({name: res.item.title, src: res.item.url});
				}
			}
		});


		//拖拽上传
		upload.render({
			elem: '#test-upload-drag'
			, url: '/upload/'
			, done: function (res) {
				console.log(res)
			}
		});

		//多文件列表示例
		var uploadListIns = upload.render({
			elem: '#test-upload-testList'
			, url: 'http://herosphp.r9it.com/admin/upload/qiniu'
			, accept: 'file'
			, multiple: true
			, auto: false
			, bindAction: '#test-upload-testListAction'
			, choose: function (obj) {

				// keep the instance of obj
				uploadListIns.obj = obj;
				var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
				//读取本地文件
				obj.preview(function (index, file, result) {

					APP.$data.files.push({
						index: index,
						name: file.name,
						size: (file.size / 1014).toFixed(1),
						status: 0,
						success: true,
					});

					//等待视图渲染完成之后再绑定事件， 否则会找不到元素
					setTimeout(function () {
						$('#upload-' + index).find('.test-upload-demo-delete').on('click', function () {
							delete files[index]; //删除对应的文件
							removeDataByKey(APP.$data.files, "index", index);
							uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
						});
					}, 100);

				});
			}
			, done: function (res, index, upload) {
				if (res.code == "000") { //上传成功
					var item = getDataByKey(APP.$data.files, "index", index);
					item.status = 1;
					item.success = true;
					return delete this.files[index]; //删除文件队列已经上传成功的文件
				}

				this.error(index, upload);
			}
			, error: function (index, upload) {

				// update the data model
				var item = getDataByKey(APP.$data.files, "index", index);
				item.status = -1;
				item.success = false;
				//绑定单个重传事件
				var that = this;
				setTimeout(function () {
					$('#upload-' + index).find('.test-upload-demo-reload').on('click', function () {
						uploadListIns.obj.upload(index, that.files[index]);
					});
				}, 100);

			}
		});

	});

</script>
</body>

</html>